<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>万小盒刀模</title>
  <link rel="stylesheet" href="../css/normalize.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <script type="text/javascript" src="../js/vue.global.js"></script>
  <script type="text/javascript" src="../js/CEP_11.x/CSInterface.js"></script>
  <script type="text/javascript" src="../js/CEP_11.x/Vulcan.js"></script>
  <script type="text/javascript" src="../js/main.js"></script>
  
</head>
 
<body>
  <div id="app_baoxiaohe">
    <div v-if="active == '0'" class="logobox">
      <img class="img60" src="../img/logo.svg" alt="万小盒刀模">
    </div>
    <div v-else-if="active == '2'" class="logobox">
      <img class="img120" src="../img/logo.svg" alt="万小盒刀模">
    </div>
    <div class="mtab0" v-if="active == '0'">
        <div class="item"  v-for="(item, index) in heTypes" :key="index" @mouseover="changeClass($event, true)" @mouseout="changeClass($event, false)">
          <img :src="'../hexing/he' + item.id + '.png'" alt="">
          <div class="title">{{ item.title }}</div>
          <div class="goto disnone"><button @click="goto(item.id)">设计</button></div>
        </div>
    </div>
    <div class="mtab1" v-else-if="active == '1'">
      <div class="cs cs0">
        <div v-if="heTypeID>0" class="xz">
          <img :src="'../hexing/he' + heTypes[heTypeID].id + '.png'" alt="">
          <div class="list">
            <h3>{{ heTypes[heTypeID].title }}</h3>
            <h5>外尺寸：{{cs.L}}×{{cs.W}}×{{cs.H}}</h5>
            <h5>内尺寸：{{cs.L-T*heTypes[heTypeID].rule.LL}}×{{cs.W-T*heTypes[heTypeID].rule.WW}}×{{cs.H-T*heTypes[heTypeID].rule.HH}}</h5>
            <label for="layerAddCheckbox">是否添加新图层：</label>
            <input type="checkbox" id="layerAddCheckbox" v-model="cs.LA">
          </div>
        </div>
        <div v-else class="xz">
          请先去[盒型]选择一个盒型
        </div>
      </div>
      <div v-if="heTypeID>0" class="cs">
        <div class="list">
          <label for="length">长<span class="nbsp"></span>度：</label>
          <input type="number" id="length" min="5" v-model="cs.L">
          <b>MM</b>
        </div>
        <div class="list">
          <label for="width">宽<span class="nbsp"></span>度：</label>
          <input type="number" id="width" min="5"  v-model="cs.W">
          <b>MM</b>
        </div>
        <div class="list">
          <label for="heigh">高<span class="nbsp"></span>度：</label>
          <input type="number" id="heigh" min="5" v-model="cs.H">
          <b>MM</b>
        </div>
        <div class="list">
          <label for="thick">纸张厚度：</label>
          <input type="number" id="thick" min="0.5" max="3" v-model="cs.T">
          <b>MM</b>
        </div>
        <div class="hr"></div>
        <div class="list">
          <label for="jackNum">挖孔数量：</label>
          <select id="jackNum" v-model="cs.JN">
            <option value="1" selected>1</option>
            <option value="2">2</option>
          </select>
          <b>NUM</b>
        </div>
        <div class="list">
          <label for="jackLength">挖孔长度：</label>
          <input type="number" id="jackLength" min="1" v-model="cs.JL">
          <b>MM</b>
        </div>
        <div class="list">
          <label for="jackWidth">挖孔宽度：</label>
          <input type="number" id="jackWidth" min="1" v-model="cs.JW">
          <b>MM</b>
        </div>
        <div class="list" v-if="cs.JN == 2">
          <label for="jackDistance">挖孔中心距：</label>
          <input type="number" id="jackDistance" min="1" v-model="cs.JD">
          <b>MM</b>
        </div>
        <div class="list">
          <label for="jackIsCheckbox">挖孔是否是圆角：</label>
          <input type="checkbox" id="jackIsCheckbox" v-model="cs.JI">
          <b class="jib"></b>
        </div>
        <div class="zhuyi">
          MM = 毫米 NUM = 个数<br>
          规格参数是成品的外盒尺寸
        </div>
      </div>
      <div v-if="heTypeID>0" class="button">
        <button class="btn" @click="createDM($event)"><img src="../img/dm.png" alt="">生成刀模图</button>
      </div>
    </div>
    <div class="mtab2" v-else-if="active == '2'">
      <h5>软件简介</h5>
      <p>本软件是adobe illustrator的一个插件，主要功能是快速生成各种盒子（目前盒型主要是飞机盒，其他盒型以后会不定期更新）的刀模图。</p>
      <h5>版本支持 [1.0.0]</h5>
      <p>本软件支持illustrator2022及以上版本</p>
      <h5>联系开发者</h5>
      <p>
        <a href="javascript:void(0);" @click="openURL('mailto:wangtengfirst@163.com')" >Email：wangtengfirst@163.com</a>
        <br />
        <a href="javascript:void(0);" @click="openURL('https://gitee.com/atengs/wanxiaohe')">Home：https://gitee.com/atengs/wanxiaohe</a>
      </p>
      <h5>请开发者喝杯咖啡！</h5>
      <div class="dashang">
        <img src="../img/weixin.png" alt="">
        <img src="../img/zhifubao.png" alt="">
      </div>
    </div>
    <nav class="navbar">
        <div :class="[active == '0' ? 'tab active' : 'tab']" @click="changeTab('0')">
          <div class="tabc">
            <img v-if="active == '0'" src="../img/hexing_active.png" alt="">
            <img v-else src="../img/hexing.png" alt="">
            <span>盒型</span>
          </div>
        </div>
        <div :class="[active == '1' ? 'tab active' : 'tab']"  @click="changeTab('1')">
          <div class="tabc">
            <img v-if="active == '1'" src="../img/sheji_active.png" alt="">
            <img v-else src="../img/sheji.png" alt="">
            <span>设计</span>
          </div>
        </div>
        <div :class="[active == '2' ? 'tab active' : 'tab']"  @click="changeTab('2')">
          <div class="tabc">
            <img v-if="active == '2'" src="../img/wode_active.png" alt="">
            <img v-else src="../img/wode.png" alt="">
            <span>我的</span>
          </div>
        </div>
    </nav>
  </div>
</body>
</html>
<script>
const { createApp, ref } = Vue;
createApp({
  data() {
    return {
      active: '0',
      heTypeID: 0,
      heTypes: {
        1: {id: 1, title: "飞机盒", rule: {LL:8, WW: 1,HH: 2}},
        2: {id: 2, title: "异型飞机盒", rule: {LL:8, WW: 1,HH: 3}}
      },
      cs: {
        LA: true,
        L: 180,
        W:  150,
        H:  70, 
        T: 1.5,
        JN: 1,
        JL: 30,
        JW: 6,
        JD: 60,
        JI: true
      },
      oldcs: {},
      T: 0, 
    }
  },
  methods: {
    // 底部选项卡切换
    changeTab(index) {
      this.active = index;
    },
    // 改变样式
    changeClass(event, isshow) {
        event.currentTarget.lastElementChild.className = isshow ? 'goto' : 'goto disnone';
    },
    // 去设计
    goto(ID) {
      this.heTypeID = ID;
      if (this.heTypeID > 0) {
        this.changeTab(1);
      }
    },
    // 生成刀模
    createDM(event) {
      event.currentTarget.disabled = true;
      event.currentTarget.className = 'btn disabled';
      if (this.cs.LA) {
        $mi.creatLayer( this.heTypes[this.heTypeID].title );
      }
      var chx = $mi.createHx(this.heTypeID, this.cs);
      event.currentTarget.disabled = false;
      event.currentTarget.className = 'btn';
      alert('生成刀模图成功！');
    },
    // 打卡URL
    openURL(url) {
      $mi.openURL(url);
    }
  },
  updated() {
    this.T = Math.round(this.cs.T * 1.2); // 1.2纸张厚度的容错
  }
  
}).mount('#app_baoxiaohe')
</script>